<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>详情页</title>
  <link type="text/css" rel="stylesheet" href="css/common.css" >
  <link type="text/css" rel="stylesheet" href="css/main.css" >
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body class="gray">
<div class="headerBar">
  <div class="topBar">
    <div class="comWidth">
      <div class="fl">
        <a href="#" class="collection">收藏慕课</a>
      </div>
      <div class="top_nav fr">
        欢迎来到慕课网！
        <a href="#">[登录]</a>
        <a href="#">[免费注册]</a>
      </div>
    </div>
  </div>
  <div class="logoBar">
    <div class="comWidth">
      <div class="logo fl">
        <img src="images/logo.jpg">
      </div>
      <div class="searchBar fl">
        <input type="text" class="search_text fl">
        <input type="button" class="search_btn fr" value="搜 索">
      </div>
      <div class="shopCar fr">
        <div class="shopText fl">购物车</div>
        <div class="shopNum fr">0<i></i></div>
      </div>
    </div>
  </div>
  <div class="navBox">
    <div class="comWidth">
      <div class="shopCate fl">
        <h3 class="shop_title">全部商品分类<i></i></h3>
        <div class="shopClass_show hide">
          <dl class="shopClass_item">
            <dt>
              <a href="#">手机</a>
              <a href="#">数码</a>
              <a href="#" class="alink">合约机</a>
            </dt>
            <dd><a href="#">荣耀</a><a href="#">单反</a><a href="#">智能设备</a></dd>
          </dl>
          <dl class="shopClass_item">
            <dt>
              <a href="#">手机</a>
              <a href="#">数码</a>
              <a href="#" class="alink">合约机</a>
            </dt>
            <dd><a href="#">荣耀</a><a href="#">单反</a><a href="#">智能设备</a></dd>
          </dl>
          <dl class="shopClass_item">
            <dt>
              <a href="#">手机</a>
              <a href="#">数码</a>
              <a href="#" class="alink">合约机</a>
            </dt>
            <dd><a href="#">荣耀</a><a href="#">单反</a><a href="#">智能设备</a></dd>
          </dl>
          <dl class="shopClass_item">
            <dt>
              <a href="#">手机</a>
              <a href="#">数码</a>
              <a href="#" class="alink">合约机</a>
            </dt>
            <dd><a href="#">荣耀</a><a href="#">单反</a><a href="#">智能设备</a></dd>
          </dl>
          <dl class="shopClass_item">
            <dt>
              <a href="#">手机</a>
              <a href="#">数码</a>
              <a href="#" class="alink">合约机</a>
            </dt>
            <dd><a href="#">荣耀</a><a href="#">单反</a><a href="#">智能设备</a></dd>
          </dl>
        </div>
        <div class="shopClass_list hide">
          <div class="shopList_count">
            <dl class="shopList_item">
              <dt>电脑整机</dt>
              <dd>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
              </dd>
            </dl>
            <dl class="shopList_item">
              <dt>电脑整机</dt>
              <dd>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
              </dd>
            </dl>
            <dl class="shopList_item">
              <dt>电脑整机</dt>
              <dd>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
              </dd>
            </dl>
            <dl class="shopList_item">
              <dt>电脑整机</dt>
              <dd>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
              </dd>
            </dl>
            <dl class="shopList_item">
              <dt>电脑整机</dt>
              <dd>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
                <a href="#">上网本</a><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">超级本</a><a href="#">笔记本</a>
              </dd>
            </dl>
          <div class="shopList_links">
            <a href="#">电脑整机频道<i></i></a>
            <a href="#">电脑<i></i></a>
          </div>
        </div>
        </div>
      </div>
      <ul class="nav fl">
        <li class="active"><a href="#">数码城</a></li>
        <li><a href="#">天黑黑</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">发现</a></li>
        <li><a href="#">二手特卖</a></li>
        <li><a href="#">名品会</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="userPosition comWidth">
    <strong><a href="#">首页</a></strong><span>&nbsp;&gt;&nbsp;</span><a href="#">平板电脑</a><span>&nbsp;&gt;&nbsp;</span><a href="#">平板电脑</a><span>&nbsp;&gt;&nbsp;</span><a href="#">Apple 苹果</a><span>&nbsp;&gt;&nbsp;</span>
    <em>MD531CH/A</em>
</div>
<div class="des_info comWidth clearfix">
    <div class="fl">
        <div class="des_img">
            <a href="#"><img src="images/des_big.jpg"></a>
        </div>
        <ul class="desSm_img clearfix">
            <li><a href="#"><img src="images/des_sm.jpg"></a></li>
            <li><a href="#"><img src="images/des_sm2.jpg"></a></li>
            <li><a href="#"><img src="images/des_sm.jpg"></a></li>
            <li><a href="#"><img src="images/des_sm2.jpg"></a></li>
            <li><a href="#"><img src="images/des_sm.jpg"></a></li>
        </ul>
        <div class="hr_15"></div>
    </div>
    <div class="fr">
        <div class="des_cont">
            <h3 class="desCont_title">全网底价 Apple 苹果 iPad mini 16G wifi版 平板电脑 前白后银 MD531CH/A 银白两色生产批次不同混合发货</h3>
            <div class="dl des_15 clearfix">
                <div class="dt">慕课价</div>
                <div class="dd">
                    <div class="des_price">
                        <span>¥</span>1999.00
                    </div>
                </div>
            </div>
            <div class="dl des_15 clearfix">
                <div class="dt">优惠</div>
                <div class="dd">
                    <div class="hg">
                        <span class="hg_text">满换购</span><em>购ipad加价优惠够配件或USB充电插座</em>
                    </div>
            </div>
        </div>
        <div class="des_bottom">
            <div class="dl clearfix">
                <div class="dt"><span class="des_position">送到</span></div>
                <div class="dd">
                    <div class="select">
                        <h3>海淀区五环内</h3><span class="arrow"></span>
                        <ul class="select_list hide">
                            <li><a href="#">瑶海区</a></li>
                            <li><a href="#">海淀区五环内</a></li>
                            <li><a href="#">瑶海区</a></li>
                            <li><a href="#">瑶海区</a></li>
                        </ul>
                    </div>
                    <span class="theGoods">有货，可当日出库</span>
                </div>
            </div>
            <div class="dl clearfix">
                <div class="dt">
                    <div class="colorSelect">选择颜色</div></div>
                <div class="dd  clearfix">
                    <div class="des_color">
                        白色
                    </div>
                    <div class="des_color color_active">
                        黑色
                    </div>
                    <div class="des_color">
                        灰色
                    </div>
                </div>
            </div>
            <div class="dl clearfix">
                <div class="dt">
                    <div class="desSize_bar">选择规格</div>
                </div>
                <div class="dd clearfix">
                    <div class="des_size clearfix">
                        <div class="size_item">WIFI 16G</div>
                        <div class="size_item">WIFI 32G</div>
                        <div class="size_item">WIFI 48G</div>
                        <div class="size_item">WIFI Cellular 16G</div> <div class="size_item">WIFI Cellular 32G</div>
                        <div class="size_item">WIFI Cellular 64G</div>
                    </div>
                </div>
            </div>
            <div class="dl clearfix">
                <div class="dt">数量</div>
                <div class="dd">
                    <div class="des_num clearfix">
                        <div class="minus">-</div>
                        <div class="num_input"><input type="text" value="1"></div>
                        <div class="plus">+</div>
                    </div>
                    <span class="num_limit">限购<em>9</em>件</span>
                </div>
            </div>
        </div>
        <div class="des_select">
            <p>已选择 <span>“白色|WIFI 16G”</span></p>
        </div>
        <div class="desBuy_bar">
            <a href="#" class="shopping">加入购物车</a>
            <span class="desBuy_line"></span>
            <a href="#" class="des_buy">立即购买</a>
        </div>
            <div class="desBuy_info">
                注意：此商品可提供普通发票，不提供增值税发票。
            </div>
</div>
    </div>
    </div>
<div class="hr_15"></div>
<div class="recommend screen_box clearfix comWidth">
    <div class="fl">
        <div class="recBar">
            <h3 class="rec_title">同价位</h3>
            <div class="lists_item">
                <div class="lists_cont">
                    <div class="lists_img"><a href="#"> <img src="images/des_big.jpg"></a></div>
                    <div class="lists_text">
                        <p><a href="#">佳能 IUXS 132数码相机 粉色 IUXS 132数码相机</a></p>
                        <h3>￥699</h3>
                    </div>
                </div>
            </div>
            <div class="lists_item">
                <div class="lists_cont">
                    <div class="lists_img"><a href="#"> <img src="images/des_big.jpg"></a></div>
                    <div class="lists_text">
                        <p><a href="#">佳能 IUXS 132数码相机 粉色 IUXS 132数码相机</a></p>
                        <h3>￥699</h3>
                    </div>
                </div>
            </div>
            <div class="lists_item">
                <div class="lists_cont">
                    <div class="lists_img"><a href="#"> <img src="images/des_big.jpg"></a></div>
                    <div class="lists_text">
                        <p><a href="#">佳能 IUXS 132数码相机 粉色 IUXS 132数码相机</a></p>
                        <h3>￥699</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="hr_15"></div>
        <div class="recBar">
            <h3 class="rec_title">看了最终买</h3>
            <div class="lists_item">
                <div class="lists_cont">
                    <div class="lists_img"><a href="#"> <img src="images/des_big.jpg"></a></div>
                    <div class="lists_text">
                        <p><a href="#">佳能 IUXS 132数码相机 粉色 IUXS 132数码相机</a></p>
                        <h3>￥699</h3>
                    </div>
                </div>
            </div>
            <div class="lists_item">
                <div class="lists_cont">
                    <div class="lists_img"><a href="#"> <img src="images/des_big.jpg"></a></div>
                    <div class="lists_text">
                        <p><a href="#">佳能 IUXS 132数码相机 粉色 IUXS 132数码相机</a></p>
                        <h3>￥699</h3>
                    </div>
                </div>
            </div>
            <div class="lists_item">
                <div class="lists_cont">
                    <div class="lists_img"><a href="#"> <img src="images/des_big.jpg"></a></div>
                    <div class="lists_text">
                        <p><a href="#">佳能 IUXS 132数码相机 粉色 IUXS 132数码相机</a></p>
                        <h3>￥699</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr">
        <div class="des_infoContent">
            <ul class="info_tit clearfix">
                <li class="active"><span>产品介绍</span></li>
                <li><span>商品评价（18782）</span></li>
            </ul>
            <div class="info_ad">
                <a href="#"><img src="images/ad.jpg"</a>
            </div>
            <div class="hr_45"></div>
            <div class="des_infoCont">
                <div class="info_text">
                    <div class="des_tit clearfix">
                        <h3>强烈推荐</h3><h4>货比三家，还选</h4>
                    </div>
                    <p>直降，但苹果品质不变！A5双核，内置Lightning闪电接口，正反可插，方便人性。小身材，炫丽的7.9英寸显示屏，7.2mm的厚度，薄如铅笔。女生包包随身携带更时尚！facetime视频通话，与密友24小时畅聊不断线。微信倾力打造，你的智能助理。苹果的牌子就不用我说了，1111补仓，存货不多哦！</p>
                </div>
                <div class="hr_45"></div>
                <div class="info_text">
                    <div class="des_tit">
                        <h3>精美图片</h3>
                    </div>
                    <p>苹果iPad7.9 英寸显示屏可带来新的iPad体验，绚丽的显示屏，在每一寸画面中呈现灵动鲜活的美妙影像。
                        苹果miniMD528CH/A采用500 万像素 iSight 摄像头，清晰记录每一次的幸福。</p>
                    <div class="imgs"><a href="#"><img src="images/pad.jpg" ></a></div>
                </div>
            </div>
        </div>
        <div class="hr_15"></div>
        <div class="des_info">
            <h3 class="shopDes_tit">商品评价</h3>
            <div class="score_box">
                <div class="score clearfix">
                    <div class="score_num">
                        <span>4.7</span><em>分</em>
                    </div>
                    <div class="score_speed">
                        <ul class="score_speed_text clearfix">
                            <li><span>非常不满意</span></li>
                            <li><span>不满意</span></li>
                            <li><span>一般</span></li>
                            <li><span>满意</span></li>
                            <li><span>非常满意</span></li>
                        </ul>
                        <p>共18939位慕课网友参与评分</p>
                        <div class="score_count">
                          <span class="score_sort">4.7<i></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="review_box clearfix">
                <div class="review_tit">
                    <ul class="review_tit_text clearfix">
                        <li class="active"><span href="#">全部</span></li>
                        <li><span href="#">满意（17490）</span></li>
                        <li><span href="#">一般（549）</span></li>
                        <li><span href="#">不满意（17490）</span></li>
                    </ul>
                    <div class="review_btn">
                        <a href="#" class="review_time">时间排序</a><a href="#" class="review_reco">推荐排序</a>
                    </div>
                </div>
                <div class="hr_15"></div>
                <div class="review_list clearfix">
                    <div class="review_userHeader">
                        <img src="images/userhead.jpg">
                        <p>61***42<br>金色会员</p>
                    </div>
                    <div class="review_info">
                        <div class="info_level">
                            <img src="images/icon/xing.gif"><img src="images/icon/xing.gif"><img src="images/icon/xing.gif"><img src="images/icon/xing.gif"><img src="images/icon/xing.gif">
                            <span>5分&nbsp;满意</span>
                            <p class="info_content">挺不错的，信赖慕课</p>
                            <p><a href="#">踩（0）</a><a href="#">顶（0）</a></p>
                        </div>
                    </div>
                    <div class="info_time">
                        2014-03-07 17:41:44
                    </div>
                </div>
                <div class="review_list clearfix">
                    <div class="review_userHeader">
                        <img src="images/userhead.jpg">
                        <p>61***42<br>金色会员</p>
                    </div>
                    <div class="review_info">
                        <div class="info_level">
                            <img src="images/icon/xing.gif"><img src="images/icon/xing.gif"><img src="images/icon/xing.gif"><img src="images/icon/xing.gif"><img src="images/icon/xing.gif">
                            <span>5分&nbsp;满意</span>
                            <p class="info_content">挺不错的，信赖慕课</p>
                            <p><a href="#">踩（0）</a><a href="#">顶（0）</a></p>
                        </div>
                    </div>
                    <div class="info_time">
                        2014-03-07 17:41:44
                    </div>
                </div>
                <div class="page">
                    <a href="#" class="firstPage">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">...</a>
                    <a href="#">下一页</a><span>共200页，到第<input class="page_text" type="text"  value="1">页<input class="page_btn" type="button" value="确定"></span>
                </div>
        </div>
    </div>
      <div class="hr_15"></div>
      <div class="user_answer">
        <div class="answer_tit clearfix">
          <div class="answer_box">全部咨询(705)</div>
          <div class="announce"><a href="#">发表咨询</a></div>
        </div>
        <div class="answer_tips">提示:因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复信息仅供参考！若由此给您带来不便请多多谅解，谢谢！</div>
        <div class="answer_bar">
          <div class="review_list clearfix">
            <div class="review_userHeader answer_photo">
              <img src="images/userhead.jpg">
              <p>61***42<br>金色会员</p>
            </div>
            <div class="review_info answer_info">
              <div class="answer_time clearfix">
                <div class="info_level">
                  <span class="answerProduct">[商品咨询]</span>
                  <p class="info_content">还能再便宜点吗</p>
                </div>
                <div class="info_time">
                  2014-03-07 17:41:44
                </div>
              </div>
              <div class="answers">
                <span>慕课网回复：</span>您好，现在已经是活动价格了<i></i>
              </div>
            </div>
          </div>
        </div>
        <div class="answer_bar">
          <div class="review_list clearfix">
            <div class="review_userHeader answer_photo">
              <img src="images/userhead.jpg">
              <p>61***42<br>金色会员</p>
            </div>
            <div class="review_info answer_info">
              <div class="answer_time clearfix">
                <div class="info_level">
                  <span class="answerProduct">[商品咨询]</span>
                  <p class="info_content">还能再便宜点吗</p>
                </div>
                <div class="info_time">
                  2014-03-07 17:41:44
                </div>
              </div>
              <div class="answers">
                <span>慕课网回复：</span>您好，现在已经是活动价格了<i></i>
              </div>
            </div>
          </div>
        </div>
        <div class="hr_15"></div>
        <div class="page">
          <a href="#" class="firstPage">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">...</a>
          <a href="#">下一页</a><span>共200页，到第<input class="page_text" type="text" value="1">页<input class="page_btn" type="button" value="确定"></span>
        </div>
      </div>
</div>
    </div>
<div class="hr_30"></div>
<div class="footer_bar">
    <div class="comWidth">
        <p class="footer_title">
            <a href="#">慕课简介</a>|<a href="#">慕课公告</a>|<a href="#">招纳贤士</a>|<a href="#">联系我们</a>|客服热线：400-675-1234
        </p>
        <p class="footer_company">
            <span>Copyright © 2006 - 2014 慕课版权所有</span><span>京ICP备09037834号</span><span>京ICP证B1034-8373号</span>
            <span>某市公安局XX分局备案编号：123456789123</span>
        </p>
        <p class="footer_img">
            <img src="images/webLogo.jpg"><img src="images/webLogo.jpg"><img src="images/webLogo.jpg"><img src="images/webLogo.jpg">
        </p>
    </div>
</div>
</body>
</html>